<template>
    <view class="zuijin_box">
        <view class="zuijin_left_box">
            <view class="head_wrap" style="z-index: 99;overflow: hidden;">
                <view class="head_box">
                    <view class="record_box" v-for="(item, index) in toplist" :key="index">
                        <view class="record_item" style="background-image: url('https://morgan.dingxians.cn/static/patatupian/10.png');">
                            <image :src="item.avatar" mode="aspectFill" class="head_portrait"></image>
                            <view class="record_title">
                                {{ item.nickname }}获得了
                                <text class="name" :style="{ background: item.level_color }">{{
                                    item.level_name }}</text>

                                {{ (item.blind_box_prize_name) }}
                            </view>
                            <!-- <view class="record_r">
                                <view class="record_text" v-if="item.pay_mode">
                                    ×{{ item.num }}
                                </view>
                                <image :src="item.blind_box_prize_image" mode="aspectFill" class="goods">
                                </image>
                            </view> -->
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default{
    props:{
        toplist:{
            type:Array,
            default:[
                {
                    avatar:'https://yq.dingxians.cn/upload/20241012/6709e497de845.WEBP',
                    nickname:'🙃',
                    level_name:'12321321',
                    blind_box_prize_name:'212132132'
                },
                {
                    avatar:'https://yq.dingxians.cn/upload/20241012/6709e497de845.WEBP',
                    nickname:'🙃',
                    level_name:'12321321',
                    blind_box_prize_name:'212132132'
                },
                {
                    avatar:'https://yq.dingxians.cn/upload/20241012/6709e497de845.WEBP',
                    nickname:'🙃',
                    level_name:'12321321',
                    blind_box_prize_name:'212132132',
                    num:'123213'
                },
                {
                    avatar:'https://yq.dingxians.cn/upload/20241012/6709e497de845.WEBP',
                    nickname:'🙃',
                    level_name:'12321321',
                    blind_box_prize_name:'212132132',
                    num:'123213'
                },
                {
                    avatar:'https://yq.dingxians.cn/upload/20241012/6709e497de845.WEBP',
                    nickname:'🙃',
                    level_name:'12321321',
                    blind_box_prize_name:'212132132',
                    num:'123213'
                },
            ]
        }
    },
    data(){
        return{

        }
    },
    
}
</script>
<style lang="scss" scoped>
.zuijin_box {
    width: 100%;
    height: 64rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 22rpx;

    .zuijin_left_box {
        width: 100%;
        height: 100%;
        // background-color: #fff;

        .head_wrap {
            width: 100%;

            .head_box {
                height: 58rpx;
                display: flex;
                align-items: center;
                // margin-top: 580rpx;

                .record_box {
                    display: flex;
                    align-items: center;
                    height: 120rpx;
                    padding-left: 100rpx;
                    animation: record_box1 80s linear infinite both;
                    // animation: record_box1 6s linear 0s infinite;
                    color: #ffffff;

                    .record_item {
                        display: flex;
                        align-items: center;
                        width: 480rpx;
                        height: 50rpx;
                        background-size: 100% 100%;
                        border-radius: 27rpx;
                        box-sizing: border-box;
                        padding-left: 60rpx;

                        .head_portrait {
                            width: 46rpx;
                            height: 46rpx;
                            border-radius: 50%;
                            margin-right: 26rpx;
                            margin-left: 10rpx;
                        }

                        .record_title {
                            width: 360rpx;
                            flex: 1;
                            font-size: 18rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;

                            .name {
                                width: 70rpx;
                                height: 35rpx;
                                border-radius: 6rpx;
                                padding: 0 10rpx;
                            }
                        }

                        .record_r {
                            flex-shrink: 0;
                            display: flex;
                            align-items: center;
                        }

                        .record_text {
                            width: 90rpx;
                            height: 40rpx;
                            font-size: 30rpx;
                            font-weight: bold;
                            margin-left: 70rpx;
                            margin-right: 10rpx;
                        }

                        .goods {
                            width: 45rpx;
                            height: 46rpx;
                            border-radius: 50%;
                            margin-right: 10rpx;
                        }
                    }
                }


                @keyframes record_box1 {

                    0% {
                        transform: translate3d(0, 0, 0);
                    }

                    100% {
                        transform: translate3d(-10000rpx, 0, 0);
                    }
                    0% {
                        transform: translate3d(0, 0, 0);
                    }
                }
            }
        }
    }

    .zuijin_right_box {
        width: 208rpx;
        height: 100%;

        image {
            width: 100%;
            height: 100%;
        }
    }
}
</style>